<template>
	<list style="height: 500rpx;width: 520rpx;" class="" :show-scrollbar="false">
		<cell class="flex align-center  px-3 pt-3" insert-animation="default" delete-animation="default"
			v-for="(item,index) in gifts" :key="index" :ref="'item'+index">
			<view class="flex rounded-circle"
				style="width: 325rpx;background-image: linear-gradient(to right,#BCABB1,#65AAf0);">
				<view class="p ">
					<image :src="item.avatar || defaultAvatar" style="width: 70rpx;height: 70rpx;"
						class="rounded-circle"></image>
				</view>
				<view class="flex-1 flex flex-column  justify-center">
					<text class="text-white font">{{item.username}}</text>
					<text class="text-white  font-sm">{{item.gift_name}}</text>
				</view>
				<view class="p">
					<image :src="item.gift_image" style="width: 70rpx;height: 70rpx;" class="rounded-circle">
					</image>
				</view>
			</view>
			<text class="text-warning  font-lg ml-1">x {{item.num}}</text>
		</cell>
	</list>
</template>

<script>
	const domModule = weex.requireModule('dom')
	export default {
		data() {
			return {
				gifts: [],
				defaultAvatar: '../../static/tabbar/min.png'
			}
		},
		// 组件 只能使用组件的生命周期
		created() {
			setInterval(() => {
				this.gifts.push({
					username: '发送人',
					avatar: '/static/gift/3.png',
					gift_name: '蛋糕',
					gift_image: '/static/gift/3.png',
					num: 1
				})
				this.toBottom();
			}, 1000)
		},
		methods: {
			toBottom() {
				this.$nextTick(()=>{
					let index = this.gifts.length - 1;
					let ref = 'item' + index;
					if (this.$refs[ref]) {
						// 参数1:要滚动到那个节点  
						domModule.scrollToElement(this.$refs[ref][0], {})
						 
					}
				})

			}
		}
	}
</script>

<style>
</style>
